<template>
    <el-dialog
            :title="dialogParams.title"
            :visible.sync="dialogParams.visible"
            :close-on-click-modal="false"
            width="70%">
        <div class="margin-b-10">
            <el-button @click="close">取 消</el-button>
            <el-button v-has="244" type="primary" @click="handle('add')">新增子参数</el-button>
        </div>
        <el-table
                ref="table"
                :data="tableData"
                stripe
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column label="序号" width="60">
                <template slot-scope="scope">
                    <span>{{ searchFrom.pageSize * (searchFrom.pageIndex - 1)  + 1 + scope.$index }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="编码">
            </el-table-column>
            <el-table-column
                    prop="descr"
                    label="描述">
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="更新日期">
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button type="text" @click="handle('detail', scope.row)">查看</el-button>
                    <el-button type="text" @click="handle('edit', scope.row)">编辑</el-button>
                    <el-button type="text" @click="handle('del', scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="margin-t-10 margin-b-10 text-center">
            <el-pagination
                    @current-change="changePage"
                    :current-page.sync="searchFrom.pageIndex"
                    :page-size="searchFrom.pageSize"
                    layout="total, prev, pager, next, jumper"
                    prev-text="上一页"
                    next-text="下一页"
                    :total="total">
            </el-pagination>
        </div>

        <!-- 新增、编辑参数 -->
        <addSubParams
                v-if="itemParams.visible"
                :dialogParams="itemParams"
                @getList="getList"></addSubParams>
    </el-dialog>
</template>

<script>
    import addSubParams from './addSubParams';
    import {getSubDictList, delSubParams} from "@/api/systemManage";
    import {filterParams} from "@/config/utils";

    export default {
        name: 'paramsDetail',
        components: {
            addSubParams
        },
        props: {
            dialogParams: {
                type: Object
            }
        },
        data () {
            return {
                formData: {
                    name: '',
                    desc: '',
                    algorithmId: this.dialogParams.id
                },
                rules: {
                    name: [
                        {required: true, message: '请输入算法名称', trigger: 'blur'}
                    ],
                    desc: [
                        {required: true, message: '算法说明', trigger: 'blur'}
                    ]
                },
                // 表格数据
                searchFrom: {
                    dictId: '',
                    valid: 1,
                    pageIndex: 1,
                    pageSize: 10
                },
                total: 0,
                tableData: [],
                // 新增参数相关参数
                itemParams: {
                    visible: false,
                    id: '',
                    title: '新增子参数'
                }
            }
        },
        created () {
            this.searchFrom.dictId = this.dialogParams.id;
            this.getList();
        },
        methods: {
            getList () {
                let params = filterParams(this.searchFrom);
                getSubDictList(params).then(res => {
                    this.tableData = res.dataList || [];
                    this.total = res.total || 0;
                }).catch(() => {})
            },
            handle (type, row) {
                switch (type) {
                    case 'add':
                        this.itemParams = {
                            visible: true,
                            title: '新增子参数',
                            type: type,
                            dictId: this.dialogParams.id
                        };
                        break;
                    case 'edit':
                        this.itemParams = {
                            visible: true,
                            title: '编辑参数',
                            type: type,
                            id: row.id
                        };
                        break;
                    case 'detail':
                        this.itemParams = {
                            visible: true,
                            title: '查看参数',
                            type: type,
                            id: row.id
                        };
                        break;
                    case 'del':
                        this.$confirm('您确定要删除该数据吗?', '删除', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            delSubParams(row.id).then(res => {
                                this.$message.success('操作成功');
                                this.getList();
                            }).catch()
                        }).catch();
                }
            },
            // 切换页码
            changePage(val) {
                this.searchFrom.pageIndex = val;
                this.getList()
            },
            // 关闭
            close () {
                this.dialogParams.visible = false;
            }
        }
    }
</script>

<style scoped>

</style>